<!-- eslint-disable no-sparse-arrays -->
<script setup lang="ts">
	import WangEditor from '@/components/WangEditor/index.vue'
	import Upload from '@/components/Upload/index.vue'
	import { reactive, toRefs, ref } from 'vue'
	import { type FormRules, type FormInstance, ElMessage } from 'element-plus'
	import { addArticleApi } from '@/api/modules/article'
	import router from '@/router'
	// import { data } from '@/config/data'
	const state = reactive({
		formInput: {
			content: '',
			className: '',
			wztp: '',
			tatle: '',
		},
	})
	const articleRules = ref<FormRules>({
		content: [{ required: true, message: '请输入内容' }],
		className: [{ required: true, message: '请选择文章分类' }],
		tatle: [{ required: true, message: '请输入标题' }],
	})
	const articleFormRef = ref<FormInstance>()

	const category = reactive({
		options: [
			'开发者',
			'设计',
			'iOS',
			'android',
			'后端',
			'php',
			'面试',
			'c+ +',
			'测试开发',
			'css',
			'区块链',
			'数据库',
			'go',
			'产品',
			'linux',
			'人工智能',
			'JavaScript',
			'框架',
			'前端',
			'python',
			'Java',
			'算法',
			'科技动态',
			'js',
			'数码产品',
			'html',
			'软件测试',
		],
	})
	const submitForm = async () => {
		await articleFormRef.value?.validate()
		await addArticleApi(state.formInput)
		ElMessage.success('新增文章成功')
		articleFormRef.value?.resetFields()
		router.push('/article/list')
	}
	const { formInput } = toRefs(state)
</script>

<template>
	<div class="box">
		<el-form :model="formInput" :rules="articleRules" ref="articleFormRef" label-width="100px">
			<el-form-item prop="tatle" label="标题">
				<el-input v-model="formInput.tatle" placeholder="请输入标题" />
			</el-form-item>
			<el-form-item prop="className" label="文章分类">
				<el-select v-model="formInput.className" class="m-2" placeholder="请选择分类">
					<el-option v-for="(item, i) in category.options" :key="i" :label="item" :value="item" />
				</el-select>
			</el-form-item>
			<el-form-item label="封面图片">
				<Upload v-model:a="formInput.wztp" />
			</el-form-item>
			<el-form-item prop="content" label="详情内容">
				<WangEditor v-model:value="formInput.content" height="200px" mode="simple" />
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="submitForm">发布文章</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>

<style scoped lang="scss"></style>
